<template>
    <div class="main audit">
        <div class="btn-box">
             <el-button type="primary"  class="filter-item backBtn" plain  @click="$router.push({name:'audit'})">返回</el-button> 
        </div>   
        <el-form  size="medium" ref="form" label-width="150px" :model="auditData">
            <el-form-item label="用户昵称:">
                <span>{{auditData.nickName}}</span>
            </el-form-item>
            <el-form-item label="用户手机号:">
                <span>{{auditData.mobile}}</span>
            </el-form-item>
            <el-form-item label="提交时间:">
                <span>{{formatDate(auditData.submitAuditAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
            </el-form-item>
            <el-form-item label="种草素材类型:">
                <span>{{auditData.type===2||auditData.type===4?'图文': '视频'}}</span>
            </el-form-item>
            <el-form-item label="种草素材文案:">
                <span>{{auditData.content}}</span>
            </el-form-item>
            <el-form-item label="图片/视频:" >
                <div  v-for="(item,index) in auditData.imageUrl" :key="index"> 
                    <img :src="item.resourceUrl" v-if="auditData.type===2||auditData.type===4" class="resource_img" />
                    <video :src="item.resourceUrl" v-if="auditData.type===8"  loop="loop" autoplay="autoplay" controls width="320" height="240" class="resource_img" >
                        <source :src="item.resourceUrl"  type="video/mp4">
                        <source :src="item.resourceUrl" type="video/ogg">
                        <center>你的浏览器不支持这种格式的视频播放，请换个浏览器试试</center>
                    </video>
                </div>
            </el-form-item>
            <el-form-item label="拒绝原因:" v-if="auditData.auditStatus===8">
                <span>{{auditData.refuseCause}}</span>
            </el-form-item>
            <el-form-item label="" style="margin-top:20px;">
                <el-button type="info" size="medium" plain @click="$router.push({ name: 'audit' })">返回</el-button>
            </el-form-item> 
        </el-form>
        <el-dialog title="拒绝原因" :visible.sync="showPop">
            <el-form :model="applyFail"  size="medium" ref="editItem" label-width="120px" >
                <el-form-item label="原因:" prop="reason" :rules="commonRules.notNullRule">
                    <el-input v-model="applyFail.reason" type="textarea" maxlength="100"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogSave" :disabled="btnDisabled">保存</el-button>
                <el-button @click="showPop = false">取消</el-button>
            </div> 
        </el-dialog>
        <div style="margin-left:150px;" v-if="auditData.auditStatus===2">
            <el-button @click="auditSuccess" type="primary" size="mini">审核通过</el-button>
            <el-button type="primary" size="mini" @click="showPop = true">审核不通过</el-button>
        </div>
    </div>   
</template>
<script>
export default {
    name: 'auditEdit',
    data() {
        return {
            auditData:{},
            showPop: false,
            applyFail:{
                reason:''
            },
            btnDisabled:false
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            this.request({
                url: '/zhongcao-web-manage/zhong-cao-manage/audit-detail',
                method: 'post',
                data: {id:this.$route.query.id}
            }).then((res) => {
                this.auditData = res.data[0]
            }).catch(err => {
                console.log(err)
            });
        },
        auditSuccess() {
            this.$confirm(' 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
            }).then(() => {
                this.request({
                    url: '/zhongcao-web-manage/zhong-cao-manage/audit',
                    method: 'post',
                    data:{auditStatus:4, id:this.$route.query.id}
                }).then((res) => {
                    if(res.status===200){
                        this.$message.success(res.data)
                        this.$router.push({name:'audit'})
                    }
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                })
            })
        },
        dialogSave() {
             this.$refs.editItem.validate(valid => {
                 if(valid) {
                     this.btnDisabled = true
                        this.request({
                            url: '/zhongcao-web-manage/zhong-cao-manage/audit',
                            method: 'post',
                            data:{auditStatus:8, id:this.$route.query.id, refuseCause:this.applyFail.reason}
                        }).then((res) => {
                            if(res.status===200){
                                this.$message.success(res.data)
                                this.btnDisabled = false
                                this.$router.push({name:'audit'})
                            }
                        }).catch(err => {
                            this.btnDisabled = false
                            console.log(err)
                        })
                 }
             }) 
        }
    }
    
}
</script>
<style lang="scss" scoped>
.audit {
    .btn-box{
       overflow: hidden;
       height: 40px;
       width: 100%;
        .backBtn{
            float: right;
        }
    }
    .resource_img{
        width: 320px;
        height: 240px;
        float: left;
        margin-right: 10px;
    }
}
</style>